<template>
	<view class="container">
		<my-bar :current="1"></my-bar>
		<!-- 状态栏和胶囊区域 -->
		<view class="service_top">
			<!-- 状态栏 -->
			<view class="status" :style="{ height: statusHeight + 'px' }"></view>
			<!-- 胶囊区域 -->
			<view class="nav" :style="{ height: capsuleHeight + 'px' }">
				<view class="location">
					<my-location></my-location>
				</view>
				<view class="search">
					<my-search size="mini"></my-search>
				</view>
			</view>
		</view>
		<view class="service_tag">
			<!-- 主要区域 -->
			<view class="service_list" :style="{ paddingTop: topHeight + 'px' }">
				<van-sidebar active-key="{{ activeKey }}" @change="onChange" custom-class>
					<van-sidebar-item title="家庭保洁" />
					<van-sidebar-item title="企业保洁" />
					<van-sidebar-item title="家电维修" />
				</van-sidebar>
			</view>
			<scroll-view scroll-y class="service_detaile" :style="{ paddingTop: topHeight + 'px' }">
				<view class="service_box">
					<van-row gutter="10">
						<van-col :span="12" v-for="item in 15" :key="item">
							<view class="box">
								<van-image width="100%" height="80" radius="5" class="img_box" src="https://img.yzcdn.cn/vant/cat.jpeg" />
								<view class="title">日常保洁</view>
							</view>
						</van-col>
					</van-row>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { systemInfo } from '@/utils/mixins.js';

const { statusHeight, capsuleHeight } = systemInfo();
const topHeight = computed(() => statusHeight.value + capsuleHeight.value);
const activeKey = ref(0);

const onChange = (e) => {
	activeKey.value = e.detail;
};
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	.service_top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		// background: linear-gradient(to right, #239fd2, #96c3e2);
		background: radial-gradient(circle, #139fd2, #86c3e2);
		.nav {
			display: flex;
			align-items: center;
			.location {
				padding: 0 20rpx;
				color: #fff;
			}
			.search {
				width: 350rpx;
			}
		}
	}
	.service_tag {
		display: flex;
		height: 100%;
		.service_list {
			width: 180rpx;
			background-color: #fefefe;
			:deep(.van-sidebar) {
				width: 100% !important;
			}
			:deep(.van-sidebar-item) {
				padding: 20rpx;
			}
			:deep(.van-sidebar-item--selected) {
				border-left: 3px solid #1296db;
			}
		}
		.service_detaile {
			width: 570rpx;
			background-color: #f4f4f4;
			.service_box {
				background-color: #fff;
				margin: 20rpx;
				padding: 20rpx;
				border-radius: 8rpx;
				.box {
					text-align: center;
					.title {
						font-size: 26rpx;
						margin-bottom: 15rpx;
					}
				}
			}
		}
	}
}
</style>
